<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>携程旅行网js特效</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#boxout{
				width: 1349px;
				height: 666px;
				background: url(img/imgctrip/t2.jpg) no-repeat;
				position: relative;
			}
			#bsmall{
				width: 127px;
				height: 136px;
				position: absolute;
				top: 490px;
				left: 0;
				background: url(img/imgctrip/fl_open_wrap1.png);
			}
			#bmiddle{
				width: 1349px;
				height: 195px;
				position: absolute;
				top: 472px;
				left: -1349px;
				background: url(img/imgctrip/t2.png);
			}
			#boxmid{
				width: 1349px;
				height: 311px;
				background: url(img/imgctrip/t3.jpg);
			}
			#boxpics{
				width: 1349px;
				height: 286px;
				background: url(img/imgctrip/t4.jpg) no-repeat;
				padding: 101px 0 0 335px;
			}
			#boxpics ul{
				list-style: none;
				height: 160px;
			}
			#boxpics ul li{
				float: left;
				margin: 0 10px 0 0;
				width: 220px;
				height: 160px;
				position: relative;
				overflow: hidden;
			}
			#boxpics ul li p{
				width: 220px;
				height: 70px;
				background: black;
				opacity: 0.5;
				color: white;
				font: 12px "微软雅黑";
				text-align: center;
				line-height: 30px;
				position: absolute;
				top: 130px;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div id="boxout">
			<div id="bsmall"></div>
			<div id="bmiddle"></div>
		</div>
		
		<div id="boxmid"></div>
		
		<div id="boxpics">
			<ul>
				<li><img src="img/imgctrip/10040700000021247662D_R_220_160.jpg"/><p>当地向导暑期特惠</p></li>
				<li><img src="img/imgctrip/1006070000002pevy78BB_R_220_160.jpg"/><p>点亮勋章</p></li>
				<li><img src="img/imgctrip/CggYHFXj4aOAT3anAABE87zdb2Q292_R_220_160.jpg"/><p>积分送豪礼</p></li>
				<li><img src="img/imgctrip/CghzgVWBJu2AbEUsAAAu6xrG2jc496_R_220_160.jpg"/><p>招募携程旅行家</p></li>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	//左边小图标点击向右滑动弹出底边遮罩层，点击遮罩层像左滑动退回。
	var bsmall=document.getElementById("bsmall");
	var bmiddle=document.getElementById("bmiddle");
	var speed=1;
	bsmall.onclick=function(){
		var timer1=window.setInterval(function(){
			if (bsmall.offsetLeft<=-127) {
				clearInterval(timer1);
				return;
			}
			bsmall.style.left=bsmall.offsetLeft-speed*2+"px";
//			console.log(bsmall.style.left);
		},1);
		
		var timer2=window.setInterval(function(){
			if (bmiddle.offsetLeft>=0) {
				clearInterval(timer2);
				return;
			}
			bmiddle.style.left=bmiddle.offsetLeft+speed*10+"px";
		},1);
	}
	
	bmiddle.onclick=function(){
		var timer3=window.setInterval(function(){
			if (bmiddle.offsetLeft<=-1349) {
				clearInterval(timer3);
				return;
			}
			bmiddle.style.left=bmiddle.offsetLeft-speed*10+"px";
		},1);
		
		var timer4=window.setInterval(function(){
			if (bsmall.offsetLeft>=0) {
				clearInterval(timer4);
				return;
			}
			bsmall.style.left=bsmall.offsetLeft+speed*2+"px";
		},1);
	}
	
	//鼠标悬浮图片上文字遮罩层向上滑动，移开向下滑动回来。
	var ps=document.getElementsByTagName("P");
	for (var i=0;i<ps.length;i++) {
		(function(m){
			ps[m].onmouseover=function(){
				var timer1=window.setInterval(function(){
					if (ps[m].offsetTop<=90) {
						clearInterval(timer1);
						return;
					}
					ps[m].style.top=ps[m].offsetTop-1+"px";
				},10);
			}
		})(i);
		
		(function(m){
			ps[m].onmouseout=function(){
				var timer2=window.setInterval(function(){
					if (ps[m].offsetTop>=130) {
						clearInterval(timer2);
						return;
					}
					ps[m].style.top=ps[m].offsetTop+1+"px";
				},10);
			}
		})(i);
		
	}
		
	
</script>
